<div class="wrapper wrapper-content animated fadeIn" id="layerDate" name="日期控件">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>layerDate简介</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="javascript:void(0)">选项1</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <p>你是时候换一款日期控件了，而layDate非常愿意和您成为工作伙伴。她致力于成为全球最用心的web日期支撑，为国内外所有从事web应用开发的同仁提供力所能及的动力。她基于原生JavaScript精心雕琢，兼容了包括IE6在内的所有主流浏览器。她具备优雅的内部代码，良好的性能体验，和完善的皮肤体系，并且完全开源，你可以任意获取开发版源代码，一扫某些传统日期控件的封闭与狭隘。layDate本着资源共享的开发者精神和对网页日历交互无穷的追求，延续了layui一贯的简单与易用。她遵循LGPL协议，您可以免费将她用于任何个人项目。</p>
                    <p>
                        官网：<a href="http://sentsin.com/layui/laydate/" target="_blank">http://sentsin.com/layui/laydate/</a>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>layerDate示例</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li>
                                        <a href="javascript:void(0)">选项1</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)">选项2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <form class="form-horizontal m-t">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">普通：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control layui-input" id="test" placeholder="YYYY-MM-DD hh:mm:ss">
                                        <!-- <label class="laydate-icon"></label> -->
                                        <!-- <div id="test" style="width: 100px; height: 100px; background: red;"></div> -->
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">限制大小：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control layui-input" id="test1" placeholder="YYYY-MM-DD hh:mm:ss">
                                        <!-- <label class="laydate-icon"></label> -->
                                        <!-- <div id="test" style="width: 100px; height: 100px; background: red;"></div> -->
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">范围选择：</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control layui-input" id="test2" placeholder="YYYY-MM-DD hh:mm:ss">
                                        <!-- <label class="laydate-icon"></label> -->
                                        <!-- <div id="test" style="width: 100px; height: 100px; background: red;"></div> -->
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">开始时间：</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control layui-input" id="test3" placeholder="YYYY-MM-DD">
                                        <!-- <label class="laydate-icon"></label> -->
                                        <!-- <div id="test" style="width: 100px; height: 100px; background: red;"></div> -->
                                    </div>
                                    <label class="col-sm-3 control-label">结束时间：</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control layui-input" id="test4" placeholder="YYYY-MM-DD" disabled>
                                        <!-- <label class="laydate-icon"></label> -->
                                        <!-- <div id="test" style="width: 100px; height: 100px; background: red;"></div> -->
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>layerDate API文档</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li>
                                        <a href="javascript:void(0)">选项1</a>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0)">选项2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="panel-body">
                                <div class="panel-group" id="accordion">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h5 class="panel-title">
                                                <span class="label label-info">1</span>
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                                    核心方法：<code>aydate.render(options)</code>
                                                </a>
                                            </h5>
                                        </div>
                                        <div id="collapseOne" class="panel-collapse collapse in">
                                            <div class="panel-body">
                                                <p>laydate.render是一个初始化方法，它的参数包含以下</p>
                                                <pre>elem: '#test1' //指定元素
type: 'date' //控件类型，支持：year/month/date/time/datetime
range: false //是否开启范围选择，即双控件
format: 'yyyy-MM-dd' //默认日期格式
value: null //默认日期，支持传入new Date()，或者符合format参数设定的日期格式字符
min: '1900-1-1' //有效最小日期，年月日必须用“-”分割，时分秒必须用“:”分割。注意：它并不是遵循 format 设定的格式。
max: '2099-12-31' //有效最大日期，同上
trigger: 'focus' //呼出控件的事件
show: false //是否直接显示，如果设置true，则默认直接显示控件
showBottom: true //是否显示底部栏
btns: ['clear', 'now', 'confirm'] //右下角显示的按钮，会按照数组顺序排列
lang: 'cn' //语言，只支持cn/en，即中文和英文
theme: 'default' //主题
position: null //控件定位方式定位, 默认absolute，支持：fixed/absolute/static
calendar: false //是否开启公历重要节日，仅支持中文版
mark: {} //日期备注，如重要事件或活动标记
zIndex: null //控件层叠顺序
done: null //控件选择完毕后的回调，点击清空/现在/确定也均会触发
change: null //日期时间改变后的回调
</pre>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <span class="label label-info">2</span>
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">其它方法/属性</a>
                                            </h4>
                                        </div>
                                        <div id="collapseTwo" class="panel-collapse collapse">
                                            <div class="panel-body">
                                                <pre>laydate.getEndDate(month, year) // 获取指定年月的最后一天，month默认为当前月，year默认为当前年。如： 
var endDate1 = laydate.getEndDate(10); //得到31 
var endDate2 = laydate.getEndDate(2, 2080); //得到29</pre>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <span class="label label-info">3</span>
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapses">bug</a>
                                            </h4>
                                        </div>
                                        <div id="collapses" class="panel-collapse collapse">
                                            <div class="panel-body">
                                                <pre>在本系统，不随滚动条滚动，可修改源码解决</pre>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>